.dialog-wrapper {
  @apply fixed z-50 top-0 left-0 w-full h-full;
  /* @apply overflow-y-auto; */
  /* @apply flex items-center justify-center; */
}

.dialog-wrapper-content:after,
.dialog-wrapper-content:before {
  content: '';
  height: 100px;
  display: block;
}

.dialog-wrapper-content.center .dialog-content {
  margin: 0 auto;
}

.dialog-wrapper-content.right .dialog-content {
  margin-left: auto;
}

.dialog-backdrop {
  @apply fixed top-0 left-0 w-full h-full backdrop-blur-sm pointer-events-none;
  @apply bg-black/30;

  @apply opacity-0 pointer-events-none;
  @apply transition-all;
}
.dialog-title {
  @apply text-xl font-bold pb-4;
}

.dialog-content {
  @apply bg-white dark:bg-gray-900 dark:border-gray-700 dark:border;
  @apply rounded-lg shadow-lg;
  @apply p-6 z-10 relative;

  @apply opacity-0 pointer-events-none scale-95;
  @apply transition-all;

  width: 90vw;
  max-width: 450px;
  max-height: initial;
}

.dialog-content.show{
  @apply pointer-events-auto;
}

.dialog-backdrop.show, 
.dialog-content.show{
  @apply scale-100;
  @apply opacity-100 ;
}

.dialog-content.size-xl {
  max-width: 900px;
}

.dialog-content.size-lg {
  max-width: 700px;
}

.dialog-content.size-sm {
  max-width: 350px;
}

.dialog-close {
  @apply w-9 h-9 p-1 border hover:bg-gray-50 hover:text-gray-600 rounded-md text-gray-400;
  @apply flex items-center justify-center;
  @apply absolute top-5 right-6 cursor-pointer;
}

